

<template>
    <div class="left-bottom" ref="left3">

    </div>
</template>
<script setup>
import * as echarts from "echarts"
import { onMounted, ref } from 'vue';
let myChart = null
let left3 = ref(null)
let initOptions = () => {
    myChart = echarts.init(left3.value)
    myChart.setOption({
        title: {
            text: '7日订单销量',
            textStyle: {

                fontSize: '20',
                color: 'white',
            },
            left: '35%',
            top: "5%"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [7.01, 7.02, 7.03, 7.04, 7.05, 7.06],
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    color: '#eee'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 1200,
                Interval: 200,
                axisLabel: {
                    color: '#eee'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: '1',
                        type: 'solid',
                    }
                }
            }
        ],
        series: [
            {
                // 系列名称
                name: '销量',
                // 系列类型
                type: 'bar',
                // 系列数据
                data: [1200, 800, 300, 500, 560, 220],
                 barWidth: 20,
                itemStyle: {
                    barBorderRadius: [8, 8, 8, 8],
                    color:'#409eff'
                    
                },
            },
            {
                name: '订单',
                type: 'bar',
                barWidth: 20,
                data: [1000, 750, 380, 450, 450, 120],
                itemStyle: {
                    barBorderRadius: [8, 8, 8, 8],
                    color:'lightgreen'
                },
            },
           
        ]
    });
}

onMounted(() => {
    initOptions()
})
</script>
<style scoped lang='scss'>
.left-bottom {
    width: 100%;
    height: 100%;
}
</style>